import React from 'react'
import avatar from '@/assets/images/1.jpg'
import { Menu, Dropdown, Badge } from 'antd';
import { withRouter } from "react-router-dom"
import { observer } from "mobx-react"
import Store from '@/store/index'
import './index.scss'

interface IProps{
  history?: any;
}
interface IState{
  isPlay: boolean;
  progress: number | string;
}
@withRouter
@observer
class Header extends React.Component<IProps,IState> {
  myRef: React.RefObject<any>;
  constructor(props:any) {
    super(props)
    this.myRef = React.createRef()
    this.state = {
      isPlay: false,
      progress: 0,
    }
  }
  componentDidMount() {
    Store.loginStatus && Store.queryMessage().then(() => {
      this.forceUpdate()
    })
    console.log(this.props.history)
  }
  toMessage = () => {
    this.props.history.push('/message')
  }
  playMusic = () => {
    console.log(this.myRef)
    if (!this.state.isPlay) { // 开始播放music
      this.myRef.current.play()
      this.myRef.current.ontimeupdate = () => {
        const progress = (this.myRef.current.currentTime / this.myRef.current.duration * 100).toFixed(0)
        this.setState({ progress })
      }
      this.setState({ isPlay: true })
    } else {
      this.myRef.current.pause()
      this.setState({ isPlay: false })
    }

  }
  toLogin = () => {
    if (Store.loginStatus) {
      Store.loginOut()
    } else {
      this.props.history.push('/login')
    }

    console.log(this)
  }
  toPublish = (e) => {
    console.log(888)
    this.props.history.push('/publish')
  }


  toProfile = () => {
    this.props.history.push('/profile')
  }
  render() {
    const menu = (
      <Menu>
        <Menu.Item key={1} onClick={this.toLogin} >
          <span  className='menu-item'>
            {Store.loginStatus ? '退出登录' : '登录/注册'}
          </span>
        </Menu.Item>
        <Menu.Item key={2} onClick={this.toProfile}>
          <span className='menu-item' >
            个人中心
                </span>
        </Menu.Item>
        <Menu.Item key={3}onClick={()=>{this.props.history.push('/article');}}>
          <span className='menu-item' >
            文章列表
            {/* 收藏<i className='iconfont icon-shoucang'></i> */}
          </span>
        </Menu.Item>
        <Menu.Item key={4} onClick={this.toPublish}>
          <span className='menu-item' >
            发帖
                </span>
        </Menu.Item>
        <Menu.Item key={5} onClick={()=>{this.props.history.push('/');}}>
          <span className='menu-item' >
            首页
          </span>
        </Menu.Item>
      </Menu>
    )
    return (
      <>
        <div className='header-wapper'>
          <div className='play-btn' onClick={this.playMusic}>
            <i className={!this.state.isPlay ? 'iconfont icon-bofang' : 'iconfont icon-zanting'} style={{ width: '100%', height: '100%' }}></i>
          </div>
          <div className='user-info'>
            <div className='username' style={!Store.loginStatus ?{color:'#999'} : {}}>
              {Store.loginStatus ? Store.userInfo.nickName : '请登录'}
            </div>
            <div className='message' onClick={this.toMessage}>
              {console.log(Store.unReadMessageCount, '消息数')}
              <Badge count={Store.unReadMessageCount} >
                <i className='iconfont icon-xiaoxi'></i>
              </Badge>

            </div>
            <div className='my-dropdown'>
              <Dropdown overlay={menu} trigger={['click']} overlayStyle={{left:'286px'}} placement='bottomRight'>
                <div className='avatar'>
                  <img src={Store.userInfo.avatar || avatar} alt="" />
                </div>
              </Dropdown>
            </div>

          </div>
          <div className='progressBar' style={{ width: this.state.progress + '%' }}>

          </div>
        </div>
        <audio ref={this.myRef} src='http://heyuanjie.top/music0.mp3'></audio>
        <div className='devide-conetnt'></div>
      </>
    )
  }
}
export default Header
